import React from 'react';
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux'

import Gamestyle from './game.css'
import * as userinfoActions from '../../actions/userinfo'

class DetailChil extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            ws:''
        };
    }
    render(){
        return(
            <div>
                <div className={Gamestyle.gameArea}>
                    <div className={Gamestyle.logins}>
                        <p style={{textAlign:'center'}}>
                            <input value={this.props.username.userid} type="text" className={Gamestyle.users} placeholder="username" id="user"/>&nbsp;
                            <input type="text" className={Gamestyle.users} placeholder="roomId" id="roomnum"/>
                        </p>
                        <p style={{textAlign:'center'}}>
                            <a className={Gamestyle.btn} onClick={this.creatRoom.bind(this)}>创建房间</a>
                            <a className={Gamestyle.btn} onClick={this.joinRoom.bind(this)}>加入房间</a>
                        </p>
                    </div>
                </div>
                <div className={Gamestyle.gameArea}>
                    <div className={Gamestyle.loginss}>
                        <h3>房间号:</h3>
                        <p id="roomid"></p>
                        <h3>玩家:</h3>
                        <p id="username"></p>
                    </div>
                </div>
                <div className={Gamestyle.gameArea}>
                    <div className={Gamestyle.talk}>
                        <p style={{textAlign:'center'}}>
                            <input type="text" className={Gamestyle.users} placeholder="talking...." id="mess"/>
                        </p>
                        <p style={{textAlign:'center'}}>
                            <a className={Gamestyle.btn} onClick={this.sendMes.bind(this)}>提交消息</a>
                        </p>
                        <div id="messarea">

                        </div>
                    </div>
                </div>
            </div>
        )
    }
    creatRoom(){
        const ws = this.state.ws;
        ws.send(JSON.stringify({
            type: "create-home"
        }));
    }
    joinRoom(){
        const ws = this.state.ws;
        const user = document.querySelector("#user");
        const roomnum = document.querySelector("#roomnum");
        const name = user.value;
        const homeID = roomnum.value;
        if (name && homeID) {
            ws.send(JSON.stringify({
                type: "join-home",
                name: name,
                home_id: homeID
            }));
        } else {
            alert("请将信息补全");
        }
    }
    sendMes(){
        const ws = this.state.ws;
        const mess = document.querySelector("#mess");
        const message = mess.value;
        ws.send(JSON.stringify({
            type: "msg",
            msg: message
        }));
    }
    componentDidMount(){
        const ws = this.props.ws.obj;
        this.setState({
            ws
        });
        ws.onmessage = function(e) {
            console.log(e.data);
            var data = false;
            try {
                data = JSON.parse(e.data);
            } catch (e) {

            }
            if (data) {
                switch (data.type) {
                    case "create-home":
                        if (data.result == "OK") {
                            const rid = document.querySelector("#roomid");
                            const uid = document.querySelector("#username");
                            rid.innerHTML = data.data.home_id;
                            uid.innerHTML = data.data.user.name;
                        } else {
                            console.log(data.msg);
                        }
                        break;
                    case "join-home":
                        if (data.result == "OK") {
                            const rid = document.querySelector("#roomid");
                            rid.innerHTML = data.data.home_id;
                        } else {
                            console.log(data.msg);
                        }
                        break;
                    case "new-user":
                        const mess= document.querySelector("#messarea");
                        const para=document.createElement("p");
                        const node=document.createTextNode(data.data.user.name + " 进入了房间, 欢迎!");
                        para.appendChild(node);
                        mess.appendChild(para);
                        break;
                    case "out":
                        const m= document.querySelector("#messarea");
                        const p=document.createElement("p");
                        const n=document.createTextNode(data.data.user.name + " 离开了房间, 再会!");
                        p.appendChild(n);
                        m.appendChild(p);
                        break;
                    case "online":
                        console.log(data.data.users);
                        var str = "";
                        for (let x in data.data.users) {
                            str += (data.data.users)[x].name + "<br/>";
                        }
                        const player= document.querySelector("#username");
                        player.innerHTML = str;
                        break;
                    case "msg":
                        const check= document.querySelector("#messarea");
                        const pa =document.createElement("p");
                        const mes=document.createTextNode(data.data.msg);
                        pa.appendChild(mes)
                        check.appendChild(pa)
                        break;
                }
            } else {

            }
        }
    }
}
function mapStateToProps(state){
    return{
        username:state.username,
        ws:state.objws,
        path:state.path
    }
}
function mapDispatchToProps(dispatch){
    return{
        actions: bindActionCreators(userinfoActions,dispatch)
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(DetailChil)
